<template>
  <div class="header-bar">
    <div class="left">
    </div>
    <div class="right">
      <el-tooltip content="全屏切换" placement="bottom">
        <el-icon class="header-btn" @click="toggleFullScreen">
          <component :is="isFullscreen ? Aim : FullScreen" />
        </el-icon>
      </el-tooltip>
      <el-badge is-dot class="header-badge">
        <el-icon class="header-btn">
          <Bell />
        </el-icon>
      </el-badge>
      <el-dropdown>
        <span class="el-dropdown-link">
          <el-avatar size="small" :src="userInfo.avatar" />
          <span class="username">{{ userInfo.name }}</span>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <el-icon style="margin-right:6px">
                <User />
              </el-icon>个人中心
            </el-dropdown-item>
            <el-dropdown-item>
              <el-icon style="margin-right:6px">
                <Setting />
              </el-icon>设置
            </el-dropdown-item>
            <el-dropdown-item divided @click="logout">
              <el-icon style="margin-right:6px">
                <SwitchButton />
              </el-icon>退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Bell, FullScreen, Aim, Sunny, Moon, User, Setting, SwitchButton } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'

const userInfo = ref({
  name: '管理员',
  avatar: 'https://img0.baidu.com/it/u=1261286811,123744361&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'
})

const router = useRouter()
const userStore = useUserStore()
const isDark = ref(false)
const isFullscreen = ref(false)

function updateFullscreenStatus() {
  isFullscreen.value = !!document.fullscreenElement
}

onMounted(() => {
  document.addEventListener('fullscreenchange', updateFullscreenStatus)
})
onBeforeUnmount(() => {
  document.removeEventListener('fullscreenchange', updateFullscreenStatus)
})

function toggleFullScreen() {
  const doc = document.documentElement
  if (!document.fullscreenElement) {
    doc.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}

function logout() {
  ElMessageBox.confirm(
    '确定要退出登录吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    userStore.removeToken()
    localStorage.removeItem('userInfo')
    router.push('/login')
    ElMessage.success('已退出登录')
  })
}
</script>

<style lang="scss" scoped>
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 24px;
  background-color: var(--el-fill-color-blank);

  .left {
    display: flex;
    align-items: center;

    .logo {
      width: 32px;
      height: 32px;
      margin-right: 12px;
    }

    .system-title {
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 1px;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    }
  }

  .right {
    display: flex;
    align-items: center;
    gap: 20px;

    .header-btn {
      cursor: pointer;
      font-size: 20px;

    }

    .header-badge {
      margin-right: 4px;
    }

    .el-dropdown-link {
      display: flex;
      align-items: center;

      .el-avatar {
        vertical-align: middle;
        margin-right: 6px;
      }

      .username {
        display: inline-block;
        vertical-align: middle;
        line-height: 1;
        font-size: 15px;
        margin-left: 0;
      }
    }
  }
}


:deep(.el-dropdown) {
  outline: none;
}

:deep(.el-dropdown-link) {
  outline: none;
}
</style>